<template>
  <div class="wallet">
    <div class="je">
      <br />
      <div class="bj">
        <h3>
          可用金额(元)
          <el-icon color="#409efc" class="no-inherit" @click="ychang">
            <View />
          </el-icon>
        </h3>
        <h1 class="mani">{{ un }}元</h1>
        <div>
          <el-button plain @click="addMan">
            充值
          </el-button>
          <el-button type="primary" @click="gotoCard">
            提现
          </el-button>
        </div>
      </div>
      <br />
    </div>
    <br />
    <br />
    <div class="ds">
      <br />
      <div class="bj">
        <div>
          <span class="yhkdszr">绑定银行卡</span>
          <p></p>
          <br />
          <br />
          <span class="lents">
            将银行卡绑定、振涛银行，告别月光、积累财富
          </span>
          <p></p>
          <br />
          <br />
          <el-button color="set" plain @click="centerDialogVisible = true">
            绑定银行卡
          </el-button>
        </div>
        <div class="t2">
          <span class="zzyx">借钱周转一下</span>
          <p />
          <div class="m1">
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;
            <span class="m1a"><b>振涛贷</b></span>
            <br />
            &nbsp;&nbsp; &nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="m1b">无抵押</span>
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="m1c">150万</span>
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="m1d">最高可借额度</span>
            <br />
            <p></p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-button type="primary">
              <router-link to="/home/test2" class="look">
                查看我的额度
              </router-link>
            </el-button>
          </div>

          <div class="m2">
            <br />
            <br />
            <br />
            <br />
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
            <span>敬请期待...</span>
          </div>
        </div>
      </div>
      <br />
      <br />
    </div>
    <br />
    <br />
    <div>
      <el-col :span="12">
        <el-form-item label="记录搜索">
          <el-date-picker
            v-model="createTimes"
            type="daterange"
            range-separator="To"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-col>
      <el-button type="info">充值记录</el-button>
      <el-button type="info">提现记录</el-button>
    </div>
    <br />
    <div>
      <el-table :data="tableData" style="width: 100%"></el-table>
    </div>
    <el-dialog
      v-model="centerDialogVisible"
      title="绑定银行卡"
      width="500px"
      center
    >
      <span>
        <!--持卡人姓名-->
        持卡人姓名： &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="userinfo">{{ realname1 }}</span>
        <br />
        持卡人手机号： &nbsp;
        <span class="userinfo">{{ phone1 }}</span>
        <br />
        持卡人身份证： &nbsp;
        <span class="userinfo">{{ idcard1 }}</span>
        <br />
        <el-form>
          <el-form-item>
            请选择银行卡类型：
            <!--              动态获取银行卡类型-->
            <el-select
              v-model="cardTypes"
              placeholder="请选择银行卡类型"
              style="width: 200px;"
            >
              <el-option
                v-for="item in cardType"
                :key="item.id"
                :label="item.bankName"
                :value="item.bankName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            请输入银行卡号：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-input
              placeholder="请输入银行卡号"
              style="width: 200px;"
            ></el-input>
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="centerDialogVisible = false">
            绑定
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!--    //充值-->
    <el-dialog v-model="toRecharge" title="充值" width="500px" center>
      <span>
        <el-form>
          <el-form-item>
            请选择银行卡：
            <!--              动态获取绑定的银行卡-->
            <el-select
              v-model="cards"
              placeholder="请选择银行卡"
              style="width: 200px;"
              @change="ams"
            >
              <el-option
                v-for="item in mycard"
                :key="item.id"
                :label="item.cardnumber"
                :value="item.cardnumber"
              >
                {{
                  item.cardnumber + '银行卡余额（' + item.balance + ')' + '元'
                }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            充值金额：
            <el-input
              style="width: 70px;"
              v-model="user.amount"
              @blur="am"
            ></el-input>
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="toRecharge = false">取消</el-button>
          <el-button type="primary" @click="cz">
            充值
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="toWithdraw" title="提现" width="500px" center>
      <span>
        <el-form>
          <el-form-item>
            请选择提现的银行卡：
            <!--              动态获取绑定的银行卡-->
            <el-select
              v-model="card"
              placeholder="请选择提现的银行卡"
              style="width: 200px;"
            >
              <el-option
                v-for="item in mycard"
                :key="item.balance"
                :label="item.cardnumber"
                :value="item.cardnumber"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            提现金额：
            <el-input
              style="width: 70px;"
              v-model="user.amount"
              @blur="am"
            ></el-input>
            可提现余额:
            <span class="ktx">{{ un }}</span>
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="toWithdraw = false">取消</el-button>
          <el-button type="primary" @click="tx">
            提现
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getlist } from '@/api/card'
import { ElMessage } from 'element-plus'
import {
  addCard,
  addMoney,
  bankCard,
  getMyunNum,
  listCardType,
  showCardBalance,
} from '@/api/login'

// Long moneyOut, Long moneyIn, BigDecimal amount, Integer operatorType

const cards = ref('')
const ams = () => {
  ElMessage.success('银行卡号为' + cards.value)
}
const realname = window.localStorage.getItem('realname')
const phone = window.localStorage.getItem('phone')
const idcard = window.localStorage.getItem('idcard')
const id = window.localStorage.getItem('id')
const card = ref()
const cardTypes = ref()
const mycard = ref([])
const cardType = ref([])
const un = ref('')
const user = ref({
  amount: '',
  id: id,
  s: 0,
})
const createTimes = ref([])
//用户信息加密
const phone1 = phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
const idcard1 = idcard.replace(/(\d{4})\d{10}(\d{4})/, '$1********$2')
const realname1 = realname.replace(/(^.{1})(.+)$/g, '*$2')
const mycards = ref([])
const centerDialogVisible = ref(false)
const toRecharge = ref(false)
const toWithdraw = ref(false)
const toMyed = () => {}
//根据用户id查询所有钱
const getMyun = () => {
  getMyunNum(id).then(ref => {
    console.log(ref.data)
    if (ref.code === 200) {
      un.value = ref.data.un
    } else {
      ElMessage.error('获取余额失败')
    }
  })
}
//获取银行卡类型
const getType = async () => {
  const { code, message, data } = await listCardType()
  cardType.value = data
}
getType()
getMyun()
const cz = () => {
  if (card.value === '') {
    ElMessage.error('请选择银行卡')
  } else {
    if (user.value.amount === '') {
      ElMessage.error('请输入充值金额')
    } else {
      alert(cards.value)
      //根据银行卡号查询余额
      showCardBalance(cards.value).then(res => {
        alert(res.data)
        if (res.data > user.value.amount) {
          //   开始
          //调用用户余额增加接口
          addMoney(user.value).then(res => {
            if (res.code === 200) {
              ElMessage.success('充值成功')
              toRecharge.value = false
              getMyun()
            } else {
              ElMessage.error('充值失败')
            }
          })
          //扣取银行卡余额
          bankCard(user.value.amount, cards.value.cardnumber).then(res => {
            if (res.code === 200) {
              ElMessage.success('银行卡扣款成功')
            } else {
              ElMessage.error('银行卡余额不足')
            }
          })
          // Long moneyOut, Long moneyIn, BigDecimal amount, Integer operatorType
          addCard(id, 0, user.value.amount, 2).then(res => {
            if (res.code === 200) {
              ElMessage.success('充值记录添加成功')
            } else {
              ElMessage.error('充值记录添加失败')
            }
          })
        } else {
          ElMessage.error('银行卡余额不足，换一张试试')
        }
      })
    }
  }

  const am = () => {
    //   充值金额只能是数字
    if (isNaN(user.value.amount)) {
      ElMessage.error('充值金额只能是数字')
      user.value.amount = ''
    }
    if (user.value.amount < 1) {
      ElMessage.error('充值金额不能小于1')
      user.value.amount = ''
    }
    if (user.value.amount > 10000) {
      ElMessage.error('单次充值金额不能超过10000')
      user.value.amount = ''
    }
    if (user.value.amount == 0) {
      ElMessage.error('请输入充值金额')
      user.value.amount = ''
    }
  }
}
const addMan = async () => {
  toRecharge.value = true
  const { code, message, data } = await getlist(phone)
  mycard.value = data
  mycards.value = data
  console.log('绑定的银行卡：')
  console.log(data)
}
const gotoCard = async () => {
  toWithdraw.value = true
  const { code, message, data } = await getlist(phone)
  mycard.value = data
  mycards.value = data
  console.log('绑定的银行卡：')
  console.log(data)
}
</script>

<style scoped>
.userinfo {
  color: rgba(17, 18, 16, 0.93);
  font-size: 20px;
}
.ktx {
  color: darkorange;
  font-family: 幼圆;
  font-size: 20px;
}
.look {
  color: #e0e4ef;
}
.m1a {
  font-family: 华文楷体;
  font-size: 20px;
}
.m1b {
  font-family: 华文楷体;
  font-size: 15px;
  color: #ee5c42;
}
.m1c {
  font-family: 华文楷体;
  font-size: 50px;
  color: darkorange;
}
.m1d {
}
.m2 {
  border-radius: 20px 20px 20px 20px;
  background-color: #cbd0d7;
  width: 230px;
  height: 200px;
  margin: -200px 0 0 250px;
}
.m1 {
  border-radius: 20px 20px 20px 20px;
  background-color: #cbd0d7;
  width: 230px;
  height: 200px;
  margin: 0 0 0 -20px;
}
.set {
  width: 40px;
}
.zzyx {
  color: #001528;
  font-size: 30px;
  font-family: 幼圆;
}
.lents {
  color: red;
  font-size: 20px;
  font-family: 新細明體-ExtB;
}
.yhkdszr {
  color: #001528;
  font-size: 30px;
  font-family: 幼圆;
}
.t2 {
  width: 600px;
  margin: -193px 0 0 700px;
}
.ds {
  /*圆角*/
  border-radius: 5px 5px 5px 5px;
  background-color: #e0e4ef;
  width: 100%;
  height: 270px;
}
.bj {
  margin: 0 0 0 25px;
}
.je {
  background-color: #e0e4ef;
}
.mani {
  color: darkorange;
}
</style>
